<!--
 * @Author: your name
 * @Date: 2020-08-25 12:31:25
 * @LastEditTime: 2020-08-25 15:39:09
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \ryfront\src\modules\roles\Add.vue
-->
<template>
    <div>
        <el-row>
            <el-form ref="roleForm"  :model="role" label-width="120px">
                
                <el-form-item label="角色名称" >
                    <el-input v-model="role.roleName" size="small" ></el-input>
                </el-form-item>

                <el-form-item label="角色编码">
                    <el-input v-model="role.roleCode" size="small"></el-input>
                </el-form-item>

                <el-form-item label="状态">
                    <el-switch v-model="role.isUse" active-color="#13ce66" inactive-color="#ff4949" ></el-switch>
                </el-form-item>

                <el-form-item>
                    <el-button size="small" @click="saveRole" type="primary" >新增</el-button>
                    <el-button size="small" @click="closeDialog" >取消</el-button>
                </el-form-item>

            </el-form>
        </el-row>
    </div>
</template>

<script>
    import {roleAdd} from '@/api/index';
    export default {
        name:'roleAdd',
        data(){
            return {
                role:{
                    roleName: '',
                    roleCode: '',
                    isUse: false,
                    status: '',
                }
            }
        },
        methods: {
            closeDialog(){
                this.$emit("closeDialog",true);
            },
            saveRole(){
                //验证表单
                this.role.status = this.role.isUse == true ? '1': '0';//可以做监听
                roleAdd(this.role).then((result) => {
                    if(result.status == 200){
                        this.$message({
                            type: "success",
                            message:'添加角色成功',
                            duration: 2000
                        });
                        this.closeDialog();
                    }  
                })
            }
        },
    }
</script>

<style scoped>


</style>